<template>
    <el-row>
      <el-col :span="24">
        <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
                 style="width: 400px; margin-left:50px;">
<!--          <el-form-item label="第几节" prop="courseNumber">-->
<!--            <el-input-number :min="1" v-model="dataForm.courseNumber" />-->
<!--          </el-form-item>-->
          <el-form-item label="标题" prop="title">
            <el-input v-model="dataForm.title"/>
          </el-form-item>
          <el-form-item label="时长" prop="duration">
            <el-input v-model="dataForm.duration"/>
          </el-form-item>
<!--          <el-form-item label="封面" prop="coverLink">-->
<!--            <Upload :links="dataForm.coverLink" :size="1" :accept="'.jpg,.jpeg,.png,.gif'"></Upload>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="视频类型" prop="videoType">-->
<!--            <el-radio-group v-model="dataForm.videoType">-->
<!--              <el-radio-button label="0">学院</el-radio-button>-->
<!--              <el-radio-button label="1">小视频</el-radio-button>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item label="视频">
            <Upload :links="dataForm.link" :size="1" :accept="'.mp4'"></Upload>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="dataForm.content"/>
          </el-form-item>
          <div>
            <el-button @click="cancel">取消</el-button>
            <el-button v-if="!dataForm.id" type="primary" @click="createData">确定</el-button>
            <el-button v-else type="primary" @click="updateData">确定</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
</template>

<script>
import { create, update } from '@/api/apiCourse'
import upload from '@/components/upload/index'
export default {
  name: 'add',
  props: ['dataForm','cancel'],
  components: {
    Upload: upload
  },
  data(){
    return {
      rules: rules,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs['dataForm'].clearValidate()
    })
  },
  methods: {
    initData(){
      console.log(this.dataForm)
    },
    formatFormData(){
      let formData = {...this.dataForm}
      if(formData.link.length < 1){
        this.$notify.success({
          title: '警告',
          message: '请上传视频'
        })
        return false
      }
      // if(formData.coverLink.length < 1){
      //   this.$notify.success({
      //     title: '警告',
      //     message: '请上传视频'
      //   })
      //   return false
      // }
      formData.link = formData.link[0].url
      // formData.coverLink = formData.coverLink[0].url
      return formData
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        const formData = this.formatFormData()
        if (valid && formData !== false) {
          create(formData).then(response => {
            this.$notify.success({
              title: '成功',
              message: '创建成功'
            })
            this.cancel()
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        const formData = this.formatFormData()
        if (valid && formData !== false) {
          update(formData).then(() => {
            this.$notify.success({
              title: '成功',
              message: '更新成功'
            })
            this.cancel()
          })
        }
      })
    }
  }
}


const rules = {
  title: [
    { required: true, message: '课程标题不能为空', trigger: 'blur' }
  ],
  duration: [
    { required: true, message: '时长不能为空', trigger: 'blur' }
  ],
  // coverLink: [
  //   { required: true, message: '封面不能为空', trigger: 'blur' }
  // ],
  videoType: [
    { required: true, message: '封面不能为空', trigger: 'blur' }
  ],
  link: [
    { required: true, message: '视频不能为空', trigger: 'blur' }
  ]
}



</script>

<style scoped>

</style>
